<template>
	<view>
		<!-- 头部 -->
		<view class="module ">
			<uNavbar :title="titles" :bgColor="backgroundColor" leftIconColor="#ffffff"></uNavbar>
			<image class="beijing" :src="brandAlls.background_image" mode="aspectFill"></image>
			<view class="topNavigation" ></view>
				<view class="navbars flex_dq">
					<image :src="brandAlls.is_follow?gz:nogz" mode="" @click="isFollow"></image>
					<u-icon class="home1" name="home" color="#ffffff" size="24" @click="goBrandHome"></u-icon>
					<u-icon class="" name="share" color="#ffffff" size="24" @click="isFenxiang"></u-icon>
				</view>
			<view class="introduce flex_Z">
				<view class="introduce_tit flex_dq">
					<image :src="brandAlls.logo" mode="aspectFill"></image>
					<view class="introduce_l">
						<text class="f36 c3">{{brandAlls.name}}</text>
						<view class="authentication flex_dq">
							<image src="../../static/icon/i_v.png" mode=""></image>
							<text>官方认证</text>
						</view>
						<text class="f26 c3">{{brandAlls.fans_number}} 粉丝</text>
					</view>
					<view class="" v-if="identiyCard.length > 0">
						<text class="application flex_c" v-if="brandAlls.is_fans" @click="goNumbercard">查看详情</text>
						<text class="application flex_c" v-else @click="goNumbercard"> 申请加入</text>
					</view>
				</view>
				<view class="jianjie flex_Z">
					<u-read-more textIndent="0" showHeight="42" :shadowStyle="shadowStyle" closeText="展开"
						color="#A6A5AF" :toggle="true"  ref="uReadMore"> 
						<u-parse class="richs" :content="content"  @load="load"></u-parse>
					</u-read-more>
				</view>
			 <view class="modele " v-if="official == 2" >
				<view class="modele_box2 " >
					<view class="excavate " @click="scrapeoCar">
						<image src="../../static/icon/i_qmpc.png" mode="aspectFill"></image>
						<view class=" flex_Z">
							<text class="f28 c3">全民拼车</text>
							<text class="f24 c6 ">全民拼车</text>
						</view>
					</view>
				</view>
				<view class="modele_box2 " >
					<view class="excavate " @click="pinPhone">
						<image src="../../static/icon/i_qnpj.png" mode="aspectFill"></image>
						<view class=" flex_Z">
							<text class="f28 c3">全民拼手机</text>
							<text class="f24 c6 ">全民拼手机</text>
						</view>
					</view>
				</view>
				<view class="modele_box2 " >
					<view class="excavate " @click="carpoolCompleteClick">
						<image src="../../static/icon/i_pwfj.png" mode="aspectFill"></image>
						<view class=" flex_Z">
							<text class="f28 c3">完拼分奖</text>
							<text class="f24 c6 ">每周拿奖金</text>
						</view>
					</view>
				</view>

				<view class="modele_box2 " ></view> <!-- 占位符 -->
			 </view>
				<view class="modele " v-else>
					<view class="modele_box2 " >
						<view class="excavate " data-url="/pagesMy/mallCenter/digBaby" @click="allJump">
							<image src="../../static/icon/i_moneys.png" mode="aspectFill"></image>
							<view class=" flex_Z">
								<text class="f28 c3">挖宝活动</text>
								<text class="f24 c6 ">宝藏福利区</text>
							</view>
						</view>
					</view>
					<view class="modele_box2 " v-if="brandAlls.is_system">
						<view  class="excavate" data-url="/pagesMy/networkRights/networkExpansion" @click="allJump">
							<image src="../../static/icon/i_rm.png" mode=" aspectFill"></image>
							<view class=" flex_Z">
								<text class="f28 c3">人脉扩展</text>
								<text class="f24 c6 ">扩大你的圈子</text>
							</view>
						</view>
					</view>
					<view class="modele_box2 " >
						<view  class="excavate" @click="goInterests">
							<image src="../../static/icon/i_brand.png" mode=" aspectFill"></image>
							<view class=" flex_Z">
								<text class="f28 c3">品牌权益</text>
								<text class="f24 c6 ">查看权益</text>
							</view>
						</view>
					</view>
					<view class="modele_box2 " ></view> <!-- 占位符 -->
				</view>
				

				<view class="collection flex_Z">
					<view class="collection_nav flex_ld">
						<view class="nav_box flex_dq">
							<text :class="inx == 1 ?'active':''" @click="isToggle(1)">平台首发</text>
							<text :class="inx == 2 ?'active':''" @click="isToggle(2)">自由坊</text>
							<text :class="inx == 3 ?'active':''" @click="isToggle(3)">品牌首发</text>
						</view>
						<view class="mores flex_dq" v-if="this.inx != 3" @click="goPageNext">
							<text class="c6">更多</text>
							<image src="../../static/icon/i_y.png" mode=""></image>
						</view>
					</view>
					<view v-if="inx == 1">
						<view class="NFT flex_ZC" v-for="(item,index) in NFTList" :key="index" @click="goDetails(item.id)">
							<image :src="item.goods_image" mode="aspectFill"></image>
							<text v-if="item.status != 1">{{item.status_desc}}</text>
							<text v-else > {{item.status_desc}} {{(item.start_time)}}</text>
							<view class="NFT_btm flex_dq">
								<view class="NFT_btm_l flex_dq">
									<image :src="item.brand_logo" mode=""></image>
									<text>{{item.brand_name}} </text>
								</view>
								
							</view>
							<view class="NFT_name flex_ld">
								<text>{{item.goods_name}}</text>
							</view>
							<view class="NFT_name flex_ld">
								<view class="NFT_btm_r flex_dq">
									<view class="sign flex_dq">
										<view class="sign_l flex_c">
											<text>系列</text>
										</view>
										<text>{{item.series_name}}</text>
									</view>
									<view class="sign flex_dq" >
										<view class="sign_l flex_c">
											<text>限量</text>
										</view>
										<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
									</view>
								</view>
								<view class="money flex_dq">
									<image src="../../static/icon/i_money.png" mode=""></image>
									<text>{{item.price}}</text>
								</view>
							</view>
						</view>
						<noDatas :xxxList="NFTList" ></noDatas>
					</view>
					<view v-if="inx == 2">
						<view class="commodity_box flex_Z">
							<view class="screen flex_ld">
								<view class="selsect flex_c">
									<text @click="isTaggle">{{values}}</text>
									<image src="../../static/icon/i_xial.png" mode=""></image>
								</view>
							</view>
							<view class="shuaixuan flex_Z" v-show="isSwitch">
								<text v-for="(item,index) in downList" :key="item.id" @click="isSelect(item)">{{item.name}}</text>
							</view>
							<view class="commodity ">
								<view class="commodity_sell flex_Z" v-for="(item,index) in freeList" :key="index" @click="goDetails2(item.id,item.goods_id)">
									<image :src="item.img" mode="aspectFill"></image>
									<text>{{item.goods_name}}</text>
									<view class="hang flex_dq">
										<view class="hang_l  flex_c">
											<text>挂单</text>
										</view>
										<text> x{{item.sotck}}</text>
									</view>
									<view class="sign_box flex_ld">
										<!-- <view class="sign flex_dq">
											<view class="sign_l  flex_c">
												<text>挂单</text>
											</view>
											<text>{{item.sotck}}个</text>
										</view> -->
										<view class="money_a flex_dq">
											<image src="../../static/icon/i_money.png" mode=""></image>
											<text>{{item.price}}</text>
											<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
										</view>
									</view>
								</view>
							</view>
							
							<noDatas :xxxList="freeList" ></noDatas>
						</view>
					</view>
					<view v-if="inx == 3">
						<view class="NFT flex_ZC" v-for="(item,index) in productList" :key="index" @click="goDetails3(item.id)">
							<image :src="item.goods_image" mode="aspectFill"></image>
							<text v-if="item.status != 1">{{item.status_desc}}</text>
							<text v-else> {{item.status_desc}} {{(item.start_time)}}</text>
							<view class="NFT_btm flex_dq">
								<view class="NFT_btm_l flex_dq">
									<image :src="item.brand_logo" mode=""></image>
									<text>{{item.brand_name}} </text>
								</view>
						
							</view>
							<view class="NFT_name flex_ld">
								<text>{{item.goods_name}}</text>
							</view>
							<view class="NFT_name flex_ld">
								<view class="NFT_btm_r flex_dq">
									<view class="sign flex_dq">
										<view class="sign_l flex_c">
											<text>系列</text>
										</view>
										<text>{{item.series_name}}</text>
									</view>
									<view class="sign flex_dq">
										<view class="sign_l flex_c">
											<text>限量</text>
										</view>
										<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
									</view>
								</view>
								<view class="money flex_dq">
									<image src="../../static/icon/i_money.png" mode=""></image>
									<text>{{item.price}}</text>
								</view>
							</view>
						</view>
						<noDatas :xxxList="productList"  :status="status" ></noDatas>
					</view>

				</view>
			</view>
			<view class="empty2"></view>
			<!-- 发行专题 -->

		</view>

		<!-- 免责声明 -->
		<view>
			<u-popup :show="showDisclaimer" @close="showDisclaimer = false" mode="center" bgColor="transparent"
				:closeOnClickOverlay="false">
				<view class="disclaimer flex_ZC">
					<text>免责声明</text>
					<view class="disclaimer_box">
						<rich-text class="disclaimer_text" :nodes="nodes"></rich-text>
					</view>
					<view class="know flex_c" @click="iAmAwareOfIt">
						<text>我已知晓</text>
					</view>
				</view>
			</u-popup>
		</view>
		
		<view class="haibaoss">
			<renderPoster v-show="showPoster" :datas="transferBox"  ref="posters" @clickHaibao="isHaibao" ></renderPoster>
		</view>
		<u-popup :show="showHaiBao" mode="center" bgColor="transparent"
			:closeOnClickOverlay="false" overlayOpacity="0.9">
			<view class="curpage_review">
				<!-- #ifdef APP -->
				<haiBao  :item="transferBox" ref="hai" @clicktwo="getcanvasimg"></haiBao>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view>
					<image :src="reviewBaseImg" mode="widthFix"></image>
				</view>
				<!-- #endif -->
			</view>
			<view class="btn_poster flex_spa_a" >
				<image src="../../static/image/close.png" mode="" @click="isClose"></image>
				<!-- #ifdef APP -->
				<image src="../../static/image/download.png" mode="" v-if="canvas"  @click="saveimg"></image>
				<!-- #endif -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getuserinfo} from "../../api/index.js";
	import {goodsList,marketGroup,brandAll,agreement,brandDetails,followAct,hatchGoods} from "../../api/store.js";
	import {share,readDisclaimers} from "../../api/other.js";
	import {
		judgeCar,
	} from "../../api/mycar.js";
	import {inProgressPhone} from "../../api/myphone.js"
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				inx: 1,
				ids:'', //id
				pinpaiId:"",//品牌id
				backgroundColor: "transparent",
				titles: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				reviewBaseImg: '', //海报内容
				values: '最新上架', //下拉
				choiceType:'create_time desc', //筛选方式
				content: ' ', //展开内容
				nodes: '',//免责声明
				ewmimg:'',
				canvas:'',//海报图片
				official:'',
				phoneJudge:false,//是否拼手机
				carJudge:false, //是否拼车
				isSwitch: false, //下拉弹窗
				showDisclaimer: false, //免责弹窗
				showHaiBao: false, //海报弹窗
				showPoster:false,
				NFTList: [],//藏品列表
				freeList: [],//自由市场列表
				productList:[], //平台首发列表
				brandAlls:{},//品牌详情
				identiyCard:[],
				transferBox:{},//暂存中转
				kkkk:false,//是否关注
				gz:'../../static/icon/i_xin.png',
				nogz:'../../static/icon/i_nox.png',
				shadowStyle: {
					backgroundImage: "none",
				},
				downList: [
					{id:1,name:'最新上架',type:'create_time desc'},
					{id:2,name:'价格升序',type:'price asc'},
					{id:3,name:'价格降序',type:'price desc'},
				],
			}
		},
		onLoad(e) {
			this.ids = e.id
		},
		onShow() {
			this.getuser()
			this.isShare()
			this.carTarget()
			this.phoneTarget()
			this.initList()
			this.isAgreement()
			this.isBrandDetails()
			this.isSwitch = false
		},
		
		methods: {
			// 有无拼车记录
			carTarget() {
				judgeCar().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carJudge = res.data.member_carpool
					}
				})
			},
			// 查询是否已拼手机
			phoneTarget() {
				inProgressPhone().then(res => {
					console.log('手机----------',res);
					if (res.code == 1) {
						this.phoneJudge = res.data.member_phone
					}
				})
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					// console.log(res)
					let disclaimers = res.data.member_attach.is_red_disclaimers;
					if(disclaimers){
						this.showDisclaimer = false
					}else{
						this.showDisclaimer = true
					}
				})
			},
			// 品牌岛免责声明
			isAgreement(){
				agreement().then(res=>{
					// console.log(res)
					this.nodes = res.data.disclaimer
				})
			},
			// 品牌岛免责声明
			isFollow(){
				console.log(this.brandAlls.is_follow);
				let types = this.brandAlls.is_follow
				let data= {
					brand_id:this.ids,
					type:types?2:1,
				}
				followAct(data).then(res=>{
					console.log(res)
					if(res.code == 1){
						uni.$u.toast(res.msg);
						this.isBrandDetails()
					}
				})
			},
			// 分享二维码海报
			isShare(){
				share().then(res=>{
					console.log(res)
					this.ewmimg = res.data.img
					uni.setStorageSync('ewmimg',this.ewmimg)
				})
			},
			// 初始化藏品列表
			initList() {
				let data = {
					page:this.page,
					brand_id:this.ids,
				};
				goodsList(data).then(res => {
					// console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.NFTList = this.page == 1 ? list : this.NFTList.concat(list);
						console.log('-------',this.NFTList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 初始化自由市场列表
			isfreeList() {
				let data = {
					page:this.page,
					brand_id:this.ids,//发行方id
					order_by:this.choiceType, //排序方式
				};
				marketGroup(data).then(res => {
					console.log('自由市场',res);
					if (res.code == 1) {
						let list = res.data.data;
						this.freeList = this.page == 1 ? list : this.freeList.concat(list);
						console.log(this.freeList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 初始化平台首发列表
			platformList() {
				let data = {
					page: this.page,
					brand_id:this.ids
				};
				hatchGoods(data).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page == 1 ? list : this.productList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},

			//品牌发行方详情
			isBrandDetails(){
				let data = {
					id:this.ids
				}
				brandDetails(data).then(res=>{
					console.log('1111',res)
					if(res.code == 1){
						this.pinpaiId = res.data.id
						this.brandAlls = res.data
						this.official = res.data.is_official
						this.content = res.data.brand_info
						this.identiyCard = res.data.identiy_card
						console.log(11111);
						console.log(res.data.thumb  + '?x-oss-process=image/resize,m_lfit,w_750,h_500');
						uni.setStorageSync('sharebg',res.data.thumb + '?x-oss-process=image/resize,m_lfit,w_750,h_500')
						console.log(2222);
						let userDetail = uni.getStorageSync('userDetail');
						let posterInfo = {
							phone:userDetail.phone,
							avatar:userDetail.avatar,
							bgimg:res.data.thumb,
							notice:res.data.brand_info,
							ewmimg:this.ewmimg
						};
						this.transferBox = posterInfo
						console.log(this.transferBox,"数据")
						// uni.setStorageSync('posterInfo',posterInfo)
					}
				})
			},
			//重新初始化富文本
			load() {
			    this.$refs.uReadMore.init();
			},
			// 下拉选择
			isSelect(e) {
				console.log(e.type);
				this.values = e.name
				this.choiceType = e.type
				this.isSwitch = false
				this.isfreeList()
			},
			// 切换
			isToggle(index) {
				// console.log(index);
				this.page = 1,
				this.inx = index
				this.isSwitch = false
				if(index == 1){
					this.NFTList = []
					this.initList()
				}else if(index == 2){
					this.freeList = []
					this.isfreeList()
				}else{
					this.productList = []
					this.platformList()
				}
			},
			// 关闭海报
			isClose(){
				this.showHaiBao = false
				this.showPoster = false
			},
			// 我已知晓
			iAmAwareOfIt(){
				readDisclaimers().then(res=>{
					if(res.code == 1){
						this.showDisclaimer = false
					}
					console.log(res)
				})
			},
			getcanvasimg(e){
				this.canvas=e
				console.log("can",e)
			},
			saveimg(){
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.canvas,
					success: function () {
						that.showHaiBao = false
						this.canvas = '';
						uni.$u.toast('保存成功')
					}
				});
			},
			// 点击分享
			isFenxiang() {
				let that = this;
				that.showPoster = true
				that.showHaiBao = true
				that.$nextTick(() => {
					// #ifdef APP
					console.log('app')
					that.$refs.hai.createGoodsPoster()
					// #endif
					// #ifdef H5
					that.$refs.posters.cusRenderDom()
					// #endif
				})
			},
			// 点击下拉
			isTaggle(e) {
				console.log(e);
				this.isSwitch = !this.isSwitch
			},
			// 回显海报图片
			isHaibao(e){
				// console.log(e);
				this.reviewBaseImg = e
			},
			// 跳转
			allJump(e){
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			scrapeoCar(){
				if(this.carJudge == -1){
					uni.navigateTo({
						url:'/pagesMy/nationalCarPooling/carPoolingIntroduce'
					})
				}else{
					uni.navigateTo({
						url:'/pagesMy/nationalCarPooling/carIndex'
					})
				}
			},
			// 拼手机入口
			pinPhone(){
				if(this.phoneJudge == -1){
					uni.navigateTo({
						url:'/pagesMy/nationalPhonePooling/phonePoolingIntroduce'
					})
				}else{
					uni.navigateTo({
						url:'/pagesMy/nationalPhonePooling/phoneIndex'
					})
				}
			},
			carpoolCompleteClick() {
				uni.navigateTo({
					url:'/pagesMy/nationalCarPooling/carpoolCompleteBonus'
				})
			},
			// 去品牌权益
			goInterests(){
				uni.navigateTo({
					url:'/pagesMy/brandCenter/brandEquity?id=' + this.ids
				})
			},
			// NFT藏品跳转
			goPageNext() {
				if (this.inx == 1) {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/collectionList'
					})
				} else if (this.inx == 2)  {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/brandFreeMarket'
					})
				}else{
					uni.navigateTo({
						url: '/pagesMy/brandCenter/propList'
					})
				}
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goBrandHome() {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/brandHomepageDetails?id=' + this.ids
				})
			},
			// 申请加入
			goNumbercard(){
				uni.navigateTo({
					url: '/pagesMy/brandCenter/numbercard?id=' + this.pinpaiId
				})
			},
			// 商品详情
			goDetails(id){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/productDetails?id=' + id
				})
			},
			// 商品详情
			goDetails2(id,goodsId){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/freeMarketDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
			// 商品详情
			goDetails3(id) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/brandDetails?id=' + id
				})
			},
			onPageScroll: function(e) {
				const scrollTop = e.scrollTop; // 获取页面滚动位置
				// 根据滚动位置修改状态栏样式
				if (scrollTop > 100) {
					this.backgroundColor = '#E0DDDA';
					this.titles = '品牌中心';
				} else {
					this.backgroundColor = 'transparent';
					this.titles = '';
				}
				// console.log("滚动距离为：" + e.scrollTop);
			},
		},

		//触底加载
		onReachBottom() {
			// console.log('触底加载');
			if(this.inx == 1){
				console.log('平台首发');
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.initList()
				}
			}else if (this.inx == 2){
				console.log('自由市场');
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.isfreeList()
				}
			}else{
				console.log('平台首发');
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.platformList()
				}
			}
		}
	}
</script>

<style scoped>
	.module {
		position: relative;
		width: 100%;
		/* height: 380rpx; */
		height: 560rpx;
	}
	.beijing{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.7;
		/* filter:blur(2rpx) */
	}

	.navbars {
		position: fixed;
		top: 26rpx;
		/* #ifdef APP */
		top:  var(--status-bar-height);
		/* #endif */
		right: 10rpx;
		width: 240rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 32rpx;
		z-index: 999;
		/* background: pink; */
	}
	.navbars>image{
		width: 38rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.home1 {
		margin-right: 20rpx;
	}

	.introduce {
		width: 100%;
		padding: 0 36rpx;
		color: #ffffff;
		transform: translateY(38rpx);
	}
	.introduce_l{
		margin-left: 10rpx;
	}
	
	.introduce_tit{
		position: relative;
	}
	.introduce_tit>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.authentication{
		font-size: 22rpx;
		margin: 4rpx 0;
	}
	.authentication>text{
		background: #00000050;
		padding: 4rpx 10rpx 4rpx 18rpx;
		margin-left: -12rpx;
	}
	.authentication>image{
		width: 40rpx;
		height: 38rpx;
		/* margin-right: 10rpx; */
	}
	.application{
		position: absolute;
		right: 0;
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	
	
	.jianjie{
		/* background: pink; */
		margin-top: 50rpx;
	}

	.jianjie>text:nth-child(1) {
		margin: 10rpx 0 0;
	}
	.navbar_box{
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 690rpx;
		background: skyblue;
		overflow: auto;
	}
	
	
	.excavate{
		display: flex;
		align-items: center;
		position: relative;
		width: 314rpx;
		height: 108rpx;
		background: #F2F2F2;
		border-radius:26rpx;
		padding: 0 26rpx;
		margin: 30rpx 0;
	}
	
	.modele {
		width: 750rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.modele_box2{
		margin-right: 40rpx;
	}
	.marlr{
		margin: 0 22rpx;
	}
	.excavate>image{
		width: 66rpx;
		height: 58rpx;
		margin-right: 16rpx;
	}

	.richs {
		color: #4D4D4D;
		font-size: 24rpx;
		line-height: 1.8;
	}

	.collection {
		width: 100%;
		margin: 50rpx 0 50rpx;
		/* background: pink; */
	}

	.collection_nav {
		width: 100%;
		margin-top: 30rpx;
		color: #ffffff80;
		font-size: 28rpx;
	}

	.nav_box {
		width: 80%;
	}

	.nav_box>text {
		font-size: 32rpx;
		color: #666666;
		margin-right: 40rpx;
	}

	.active {
		color: #8C7554 !important;
		font-weight: 700;
		/* -webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
	}

	.mores>image {
		width: 32rpx;
		height: 34rpx;
	}

	.NFT {
		position: relative;
		width: 100%;
		background: #B8A185;
		border: 2rpx solid #B8A185;
		margin: 40rpx auto;
		border-radius: 40rpx;
		padding-bottom: 10rpx;
	}

	.NFT>image {
		width: 94%;
		height: 650rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.NFT>text {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		min-width: 148rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #66553d;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 0 20rpx 0 0;
	}

	.NFT_btm {
		width: 100%;
		/* background: pink; */
		margin-top: 32rpx;
	}

	.NFT_btm_l {
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 20rpx;
	}

	.NFT_btm_l>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.sign {
		font-size: 22rpx;
		background: #c3b39f;
		border-radius: 20rpx 10rpx 10rpx 20rpx;
		color: #ffffff;
		/* padding-right: 20rpx; */
		margin-right: 20rpx;
	}

	.sign>text {
		margin-left: 6rpx;
		padding-right: 10rpx;
		padding-bottom: 2rpx;
	}

	.sign_l {
		color: #ffffff;
		font-size: 22rpx;
		width: 60rpx;
		padding: 4rpx 0 6rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: #997F5C;
	}

	.sign>text {
		margin-left: 10rpx;
	}
	.NFT_name {
		width: 100%;
		color: #ffffff;
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.NFT_name>text:nth-child(1) {
		margin-left: 20rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.NFT_btm_r{
		margin-left: 20rpx;
	}
	.money {
		color: #ffffff;
		font-size: 42rpx;
		font-family: iconfont2;
		margin-right: 32rpx;
	}
	.money>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.commodity_box {
		width: 100%;
		margin: 30rpx auto 30rpx;
		position: relative;
	}

	.screen>text {
		width: 82rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		background: #383366;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
	}

	.selsect {
		font-size: 24rpx;
		color: #ffffff;
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 20rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.selsect>image {
		width: 24rpx;
		height: 16rpx;
		margin-left: 8rpx;
	}

	.shuaixuan {
		position: absolute;
		top: 48rpx;
		left: 0;
		width: 100%;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #D7BA93;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff20;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 50rpx;
	}

	.commodity {
		z-index: 9;
	}

	.commodity_sell {
		position: relative;
		width: 336rpx;
		/* height: 526rpx; */
		background: #B8A185;
		border: 2rpx solid #B8A185;
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 382rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		color: #ffffff;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.hang{
		position: absolute;
		top: 30rpx;
		left: 0;
		background: #00000090;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		color: #ffffff;
		
	}
	.hang>text{
		margin-left: 10rpx;
	}
	.prop_box{
		color: #ffffff;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}
	.prop_box>image{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}

	.money_a {
		color: #ffffff;
		font-size: 30rpx;
		font-family: iconfont;
		margin-right: 12rpx;
	}

	.money_a>image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.haibaoss{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateX(100%);
		z-index: 1;
	}
	
	
	.sign_box {
		margin: 0 10rpx;
	}
	.disclaimer {
		width: 600rpx;
		/* height: 700rpx; */
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 0 auto;
	}

	.disclaimer>text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
		margin: 40rpx auto 0rpx;
	}

	.disclaimer_box {
		width: 92%;
		height: 600rpx;
		margin: 0 auto 30rpx;
		overflow: auto;
	}

	.disclaimer_text {
		font-size: 20rpx;
		/* color: #898989; */
		/* line-height: 1.2; */
	}

	.know {
		font-size: 32rpx;
		color: #ffffff;
		width: 100%;
		height: 88rpx;
		background: #D7BA93;
		border-radius: 0 0 20rpx 20rpx;
	}

	.index {
		padding: 24rpx;
		box-sizing: border-box;
	}
	.curpage_review {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
	.btn_poster{
		width: 100%;
	}
	.btn_poster>image{
		width: 110rpx;
		height: 110rpx;
	}


</style>